"use client"

import { FluentEmoji, Markdown } from "@lobehub/ui"
import { createStyles } from "antd-style"
import { memo } from "react"
import { useTranslation } from "react-i18next"
import { Center, Flexbox } from "react-layout-kit"

import { BRANDING_NAME } from "@/const/branding"
import { isCustomBranding } from "@/const/version"
import { useGreeting } from "@/hooks/useGreeting"

import AgentsSuggest from "./AgentsSuggest"
import QuestionSuggest from "./QuestionSuggest"
import welcome from "@/locales/default/welcome";

const useStyles = createStyles(({ css, responsive }) => ({
  container: css`
    align-items: center;
    ${responsive.mobile} {
      align-items: flex-start;
    }
  `,
  desc: css`
    font-size: 14px;
    text-align: center;
    ${responsive.mobile} {
      text-align: start;
    }
  `,
  title: css`
    margin-block: 0.2em 0;
    font-size: 32px;
    font-weight: bolder;
    line-height: 1;
    ${responsive.mobile} {
      font-size: 24px;
    }
  `
}))

const InboxWelcome = memo(() => {
  const { styles } = useStyles()
  const greeting = useGreeting()

  return (
      <Center padding={16} width={"100%"}>
        <Flexbox
            className={styles.container}
            gap={16}
            style={{ maxWidth: 800 }}
            width={"100%"}
        >
          <Flexbox align={"center"} gap={8} horizontal>
            <FluentEmoji emoji={"👋"} size={40} type={"anim"} />
            <h1 className={styles.title}>{greeting}</h1>
          </Flexbox>
          <Markdown className={styles.desc} variant={"chat"}>
            {welcome.guide.defaultMessageWithoutCreate.replace("{{appName}}", BRANDING_NAME)}
          </Markdown>
          { (
              <>
                <AgentsSuggest />
                {!isCustomBranding && <QuestionSuggest/>}
              </>
          )}
        </Flexbox>
      </Center>
  )
})

export default InboxWelcome
